<template>
  <div class="details">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item
       v-for="photo in bannerList"
       :key="photo.id"
      >
        <img :src="photo.url" alt="">
      </van-swipe-item>
    </van-swipe>
    <div>
      <h3>{{detail.title}}</h3>
      <div>
        <span :style="{color: 'red', fontWeight: 700}">￥{{ detail.price }}</span>
        <span :style="{paddingLeft: '12px', textDecoration: 'line-through'}">{{ detail.originPrice }}</span>
      </div>
    </div>
    <van-divider>图文详情</van-divider>
    <van-image
      lazy-load
      v-for="img in detail.descContentList"
      :key="img.photo.id"
      :src="img.photo.url"
      :style="{display: 'block'}"
    />
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" badge="0" @click="$router.push('/cart')" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button type="warning" text="加入购物车" @click="handleAddToCart" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
    </div>
</template>

<script>
import { getDetails } from '@/api/detail'
import { mapMutations } from 'vuex'
export default {
  name: 'Detail',
  data () {
    return {
      bannerList: [],
      detail: []
    }
  },
  async created () {
    const result = await getDetails(this.$route.query.id)
    this.bannerList = result.detail.photo
    this.detail = result.detail
  },
  methods: {
    ...mapMutations(['addToCart']),
    handleAddToCart () {
      const { id, image, title, price } = this.detail
      this.addToCart({
        id,
        image,
        title,
        price,
        amount: 1
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    height: 375px;
    img{
      width: 100%;
      height: 100%;
    }
  }
</style>
